<!--
 * @Author: 'Chenfarry' '2925102113@qq.com'
 * @Date: 2024-08-02 17:59:39
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2024-09-09 17:50:54
 * @FilePath: \orderApp\packageOne\pages\foodReview\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: 'Chenfarry' '2925102113@qq.com'
 * @Date: 2024-08-02 17:59:39
 * @LastEditors: 'Chenfarry' '2925102113@qq.com'
 * @LastEditTime: 2024-08-14 17:43:23
 * @FilePath: \orderApp\packageOne\pages\foodReview\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<route lang="json5" type="page">
{
  style: {
    navigationStyle: "custom",
    navigationBarTextStyle: "black",
    navigationBarTitleText: "就餐评议",
  },
}
</route>

<template>
  <view :class="{ 'fixed-touch': showDetail }" :style="{ '--bot': bottom + 8 + 'px' }">
    <cu-navbar title="就餐评议"></cu-navbar>
    <!-- 解决popup弹窗滚动效果穿透，导致下层页面滚动问题 -->
    <view class="overlayer" @touchmove.prevent v-show="showDetail"></view>
    <view class="wrap">
      <view class="content">
        <reviewComment
          v-for="(item, index) in advicelist"
          :itemData="item"
          :itemIdx="index"
          @changelike="changelike"
          :key="index"
        ></reviewComment>
        <uv-load-more
          line
          :status="loadMore.status"
          :loading-text="loadMore.loadingText"
          :loadmore-text="loadMore.loadmoreText"
          :nomore-text="loadMore.nomoreText"
          @loadmore="loadHandler"
        />
      </view>

      <view class="bottom">
        <view class="btnBox">
          <uv-button shape="circle" color="#00754A" @click="goComment">
            <span style="font-size: 31rpx">前往评议</span>
          </uv-button>
        </view>
      </view>
    </view>
    <commentPop ref="popRef" @close="closeFn" ></commentPop>
  </view>
</template>

<script lang="ts" setup>
//

import { reqComplainAdvice, reqLikeComplain } from "@/service/business/goods/index";
import reviewComment from '@/pages/components/reviewComment.vue'
import commentPop from "./components/commentPop.vue";
import { useUserStore } from "@/store";
const userStore = useUserStore();

const bottom = ref(userStore.pinia_SafeVal.bottom);

const preventHandler = () => {
  return;
};

const showDetail = ref(false);
const popRef = ref(null);
const goComment = () => {
  popRef.value.open();
  showDetail.value = true;
};

// 关闭弹窗的时候重置页面内容
const closeFn = () => {
  showDetail.value = false;
  pageInfo.value.current = 1;
  advicelist.value = []
  getComplainAdvice()
};

// 改变点赞状态
const changelike = (idx) => {
  uni.vibrateShort();
  let { adviceId, attent } = advicelist.value[idx];
  reqLikeComplain({
    userId: userStore.userInfo.user.userId,
    adviceId,
  }).then((res) => {
    advicelist.value[idx].attent = attent == 1 ? 0 : 1;
  });
};

// 加载状态数据
const loadMore = ref({
  status: "loading",
  loadingText: "努力加载中",
  loadmoreText: "上拉或点击加载更多",
  nomoreText: "到底啦",
});

// 分页信息
const pageInfo = ref({
  size: 10,
  current: 1,
  total: null,
});
// 手动加载更多
const loadHandler = () => {
  loadMoreFn();
};

// 触底加载更多
onReachBottom(() => {
  loadMoreFn();
});

const loadMoreFn = () => {
  if (pageInfo.value.current >= Math.ceil(pageInfo.value.total / pageInfo.value.size)) {
    loadMore.value.status = "nomore";
    return false;
  }
  pageInfo.value.current++;
  getComplainAdvice();
};

// 评议列表
const advicelist = ref([]);

const getComplainAdvice = () => {
   
  loadMore.value.status = "loading";
  let { size, current } = pageInfo.value;
  const userId = userStore.userInfo.user.userId;
  const kitchenId = userStore.userInfo.user.kitchenId;
  let params = {
    size,
    current,
    userId,
    kitchenId,
  };
  reqComplainAdvice(params).then((res) => {
    if (res.retCode == 2000) {
      advicelist.value.push(...res.data);
      pageInfo.value.total = res.total;
      if (pageInfo.value.current < Math.ceil(res.total / pageInfo.value.size)) {
        loadMore.value.status = "loadmore";
      } else {
        loadMore.value.status = "nomore";
      }
    }
  });
};

onMounted(() => {
  getComplainAdvice();
});
</script>

<style lang="scss" scoped>
//

.content {
  padding: 24rpx 24rpx  180rpx 24rpx;
}
.bottom {
  width: 100%;
  background: rgba(212, 233, 226, 0.6);
  border-radius: 23rpx 23rpx 0rpx 0rpx;
  position: fixed;
  bottom: 0;
  .btnBox {
    width: 100%;
    background: #fff;
    padding: 15rpx 31rpx var(--bot) 31rpx;
    border-radius: 23rpx 23rpx 0rpx 0rpx;
    box-sizing: border-box;
  }
}

.fixed-touch {
  position: fixed;
}
.overlayer {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 500;
  background-color: #000;
  opacity: 0.5;
}
</style>
